<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社ERP系统 - 登录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
        }
        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
            position: relative;
            z-index: 2;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        
        .floating-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: #42586E;
        }
        
        .floating-text {
            position: absolute;
            color: #E3D4AF;
            white-space: nowrap;
            animation: floating linear infinite;
        }

        /* 预定义四个方向的动画 */
        @keyframes floatLeft {
            from { transform: translateX(120%) rotate(5deg); }
            to { transform: translateX(-120%) rotate(-5deg); }
        }
        
        @keyframes floatRight {
            from { transform: translateX(-120%) rotate(-5deg); }
            to { transform: translateX(120%) rotate(5deg); }
        }
        
        @keyframes floatUp {
            from { transform: translateY(120vh) rotate(5deg); }
            to { transform: translateY(-20vh) rotate(-5deg); }
        }
        
        @keyframes floatDown {
            from { transform: translateY(-20vh) rotate(-5deg); }
            to { transform: translateY(120vh) rotate(5deg); }
        }
    </style>
</head>
<body class="d-flex align-items-center py-4">
    <div class="floating-background" id="floatingBackground"></div>
    
    <div id="app" class="form-signin text-center">
        <form @submit.prevent="handleSubmit">
            <h1 class="h3 mb-3 fw-normal">旅行社ERP系统</h1>
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="username" v-model="form.username" required>
                <label for="username">用户名</label>
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control" id="password" v-model="form.password" required>
                <label for="password">密码</label>
            </div>
            <button class="w-100 btn btn-lg btn-primary" type="submit" :disabled="isSubmitting">
                {{ isSubmitting ? '登录中...' : '登录' }}
            </button>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/api/config.js?v=2"></script>
    <script src="js/api/auth.js?v=2"></script>
    <script>
        console.log('Login page initialized:', new Date().toISOString());
        
        new Vue({
            el: '#app',
            data: {
                form: {
                    username: '',
                    password: ''
                },
                isSubmitting: false
            },
            created() {
                console.log('Vue instance created');
            },
            methods: {
                async handleSubmit() {
                    try {
                        console.log('Form submitted:', {
                            username: this.form.username,
                            timestamp: new Date().toISOString()
                        });
                        
                        this.isSubmitting = true;
                        
                        // 确保 auth 对象存在
                        if (!window.auth) {
                            throw new Error('Auth module not loaded');
                        }
                        
                        // 调用登录方法
                        const userData = await window.auth.login(
                            this.form.username, 
                            this.form.password
                        );
                        
                        console.log('Login successful:', {
                            username: userData.username,
                            hasToken: !!userData.access_token
                        });
                        
                        // 添加延迟确保日志显示
                        await new Promise(resolve => setTimeout(resolve, 1000));
                        
                        if (userData && userData.access_token) {
                            console.log('Preparing to redirect to dashboard...');
                            
                            // 确保 token 已经保存
                            const savedToken = localStorage.getItem(API_CONFIG.USER_KEY);
                            console.log('Saved token check:', {
                                hasToken: !!savedToken,
                                tokenData: savedToken ? JSON.parse(savedToken) : null,
                                localStorage: {
                                    keys: Object.keys(localStorage),
                                    length: localStorage.length
                                }
                            });
                            
                            // 使用完整的 URL 路径进行跳转
                            const baseUrl = window.API_CONFIG.BASE_URL || '';
                            const dashboardUrl = `${baseUrl}/dashboard.html`;
                            console.log('Redirecting to:', dashboardUrl);
                            
                            // 直接跳转，不抛出错误
                            window.location.replace(dashboardUrl);
                            return; // 直接返回，不继续执行
                        } else {
                            throw new Error('Login failed - invalid response');
                        }
                    } catch (error) {
                        // 忽略 STOP_EXECUTION 错误
                        if (error.message === 'STOP_EXECUTION') {
                            return;
                        }
                        
                        console.error('Login error:', {
                            message: error.message,
                            type: error.constructor.name
                        });
                        alert('登录失败，请检查用户名和密码');
                    } finally {
                        this.isSubmitting = false;
                    }
                }
            }
        });

        const landmarks = [
            '埃菲尔铁塔', '长城', '泰姬陵', '马丘比丘', '圣托里尼', 
            '威尼斯', '巴厘岛', '富士山', '悉尼歌剧院', '大峡谷',
            '布拉格广场', '吴哥窟', '马尔代夫', '迪拜塔', '卢浮宫',
            '万里长城', '故宫', '西湖', '黄山', '张家界',
            '巴黎圣母院', '比萨斜塔', '金字塔', '凯旋门', '自由女神像',
            '东京塔', '香港维港', '澳门威尼斯人', '新加坡金沙', '伦敦眼',
            '阿联酋皇宫', '撒哈拉沙漠', '北极光', '死海', '尼亚加拉瀑布',
            '珠穆朗玛峰', '九寨沟', '桂林山水', '三亚亚龙湾', '莫高窟',
            '布达拉宫', '苏州园林', '丽江古城', '敦煌月牙泉', '乐山大佛'
        ];

        function createFloatingText() {
            const container = document.getElementById('floatingBackground');
            const text = document.createElement('div');
            text.className = 'floating-text';
            text.textContent = landmarks[Math.floor(Math.random() * landmarks.length)];
            
            // 随机文字大小 (1.5rem - 3.5rem)
            const size = 1.5 + Math.random() * 2;
            text.style.fontSize = `${size}rem`;
            
            // 随机动画时长 (30-60秒，让运动更缓慢)
            const duration = 30 + Math.random() * 30;
            text.style.animationDuration = `${duration}s`;
            
            // 随机选择运动方向
            const directions = ['floatLeft', 'floatRight', 'floatUp', 'floatDown'];
            const animation = directions[Math.floor(Math.random() * directions.length)];
            text.style.animationName = animation;
            
            // 根据动画方向设置初始位置
            if (animation === 'floatLeft' || animation === 'floatRight') {
                text.style.top = `${Math.random() * 80 + 10}vh`; // 避免太靠近顶部或底部
                if (animation === 'floatLeft') {
                    text.style.left = '0';
                } else {
                    text.style.right = '0';
                }
            } else {
                text.style.left = `${Math.random() * 80 + 10}vw`; // 避免太靠近左右边缘
                if (animation === 'floatUp') {
                    text.style.bottom = '0';
                } else {
                    text.style.top = '0';
                }
            }
            
            container.appendChild(text);
            
            // 当动画完成一次循环时，改变文字内容和位置
            text.addEventListener('animationiteration', () => {
                text.textContent = landmarks[Math.floor(Math.random() * landmarks.length)];
                if (animation === 'floatLeft' || animation === 'floatRight') {
                    text.style.top = `${Math.random() * 80 + 10}vh`;
                } else {
                    text.style.left = `${Math.random() * 80 + 10}vw`;
                }
            });
        }

        // 初始创建40个文字
        for (let i = 0; i < 40; i++) {
            createFloatingText();
        }

        // 每3秒创建一个新文字
        setInterval(createFloatingText, 3000);

        // 定期清理超出屏幕的元素（每分钟执行一次）
        setInterval(() => {
            const container = document.getElementById('floatingBackground');
            const elements = container.getElementsByClassName('floating-text');
            const maxElements = 50; // 最大元素数量
            
            if (elements.length > maxElements) {
                for (let i = 0; i < elements.length - maxElements; i++) {
                    container.removeChild(elements[0]);
                }
            }
        }, 60000);
    </script>
</body>
</html> 